<template>
	<view class="out">
		<checkbox-group name="复选框" @change="checkChange">
			<view class="item" v-for="(item,index) in goods" :key="item.id">
				<checkbox :value="item.id" :checked="item.checked"/>
				<text class="title">商品名：{{item.name}}--</text>
				<text class="title">价格：{{item.price}}</text>
				<text class="del" @click="remove(index)">删除</text>
			</view>
		</checkbox-group>
		
		<view class="card">
			<view class="text">
				选中{{totalNumber}}个产品，总价：{{totalPrice}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	const goods = ref([
		{id: "1",name: '数据1',price: 4995,checked:false},
		{id: "2",name: '数据2',price: 4995,checked:false},
		{id: "3",name: '数据3',price: 4995,checked:false},
		{id: "4",name: '数据4',price: 4999,checked:false},
		{id: "5",name: '数据5',price: 4999,checked:false},
		{id: "6",name: '数据6',price: 4999,checked:false},
		{id: "7",name: '数据7',price: 4999,checked:false},
	]);
	
	const selectGroup = ref([]);
	const totalNumber = computed(()=> selectGroup.value.length)
	const totalPrice = computed(()=>
	goods.value.filter(item=>item.checked == true).reduce((prev,curr)=>
	{
		console.log(curr)
		return prev + curr.price; 
	}
	
	,0
	));

	function remove(val_id) {
		console.log(val_id);
		goods.value.splice(val_id, 1);
	}
	
	function checkChange(e){
		selectGroup.value = e.detail.value;
		goods.value.forEach(item=>{
			item.checked = selectGroup.value.includes(item.id);
		})
		// console.log(selectGroup.value.includes(1))
	}
</script>

<style lang="scss" scoped>
	.out {
		padding: 10rpx;

		.item {
			padding: 10rpx 0;

			.del {
				color: #c00;
				margin-left: 30rpx;
			}
		}
		.card{
			margin-top: 30px;
			border-top: 1px solid #eee;
			padding: 10px;
		}
	}
</style>